<template>
  <div v-if="!btnHide && !forcedBtnHide" class="saveBtnAll" style="display: inline-flex;margin: 0 !important;">
    <el-button v-if="btnShow" @click="cancel()">{{ $t("取消") }}</el-button>
    <!-- <el-button v-if="(menuKey || processKey) && !urlList.includes(this.$route.path)" type="info" @click="showImage">{{ $t('查看流程') }}</el-button>-->
    <el-button v-if="(menuKey || processKey) && !urlList.includes(this.$route.path)" type="info" @click="showXml">{{ $t('查看流程') }}</el-button>
    <cache-btn v-if="btnShow" :is-disable="isDisable" :btn-has-permi="btnHasPermi" :cache-key="cacheKey" :bus-data="busData" @cacheData="cacheData" />
    <el-button v-if="btnShow" v-hasPermi="btnHasPermi" :disabled="isDisable" type="primary" @click="submitForm('save')">{{ $t("保存") }}</el-button>
    <el-button v-if="btnShow" v-hasPermi="btnHasPermi" :disabled="isDisable" type="primary" @click="submitForm('process')">{{ $t(processBtn) }}</el-button>

    <el-dialog v-if="imageOpen" :title="$t('流程图')" :close-on-click-modal="false" :visible.sync="imageOpen" width="50%" custom-class="dialogForm" append-to-body :lock-scroll="false">
      <!-- <el-image v-if="processData.processDefinitionKey !== 'act_free_flow_approval'" v-loading="loading" :src="processData.photoBase64">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline" />
        </div>
      </el-image>-->
      <div>
        <actFlowFormChart v-if="processData.processDefinitionKey !== 'act_free_flow_approval'" ref="actFlowFormChart" />
      </div>

      <span v-if="processData.processDefinitionKey === 'act_free_flow_approval'">
        <div style="text-align: center;margin-top: 50px;margin-bottom: 50px">
          <span v-html="$t('该功能配置流程为自由流审批<br>')" />
          <span v-html="$t('在流程启动时由流程发起人选择审批人<br>')" />
          <span v-html="$t('选择的审批人按顺序进行审批<br>')" />
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { showFlowChart } from '@/api/act/process/actProcess'
  import { getProcessKey } from '@/api/act/process/wfMenuProcess'
  import cacheBtn from '@/components/Act/FormBtn/cacheBtn.vue'
  import ActFlowFormChart from '@/views/act/process/actFlowFormChart'
  export default {
    name: 'FormBtn',
    components: {
      ActFlowFormChart,
      cacheBtn
    },
    props: {
      // 是否强制隐藏操作按钮
      btnHide: {
        type: Boolean,
        required: false
      },
      // 业务数据
      busData: {
        type: Object,
        required: true
      },
      // 功能对应的菜单key-用来查看流程图
      menuKey: {
        type: String,
        required: false,
        default: null
      },
      // 流程标识
      processKey: {
        type: String,
        required: false,
        default: null
      },
      // 流程状态
      status: {
        type: String,
        required: false,
        default: undefined
      },
      // 申请人或创建人
      apply: {
        type: String,
        required: false,
        default: undefined
      },
      // 权限标签
      hasPermi: {
        type: String,
        default: undefined
      },
      saveFunc: {
        type: Function,
        default: undefined,
        desc: '保存绑定方法'
      },
      cancelFunc: {
        type: Function,
        default: undefined,
        desc: '取消绑定方法'
      },
      // 缓存键名
      cacheKey: {
        type: String,
        default: ''
      },
      processBtn: {
        type: String,
        default: '保存并启动流程'
      }
    },
    data() {
      return {
        // 当前用户ID
        userId: this.$store.state.user.userId,
        // 申请人
        applyId: undefined,
        // 审批状态
        actStatus: undefined,
        // 权限标签数组
        btnHasPermi: this.hasPermi ? [this.hasPermi + ':edit'] : [],
        // 是否禁用保存按钮 防止重复提交
        isDisable: false,
        // 流程数据
        processData: {},
        // 流程图片是否展示
        imageOpen: false,
        loading: false,
        // 待办列表
        urlList: ['/act/task/actTodoTaskList']
      }
    },
    computed: {
      ...mapState({
        forcedBtnHide: state => state.formBtn.forcedBtnHide
      }),
      btnShow: function() {
        // 新添加的数据 或者 流程状态 不是待审批 不是审批完成 并且当前用户是申请人 才显示保存按钮
        if (this.busData.id === undefined || (this.actStatus !== 'D' && this.actStatus !== 'W')) {
          return true
        } else {
          return false
        }
      }
    },
    watch: {
      btnShow(newVal) {
        this.$parent.btnHide !== undefined ? this.$parent.btnHide = !newVal : ''
        // console.log(this.$parent.$parent)
        // if (this.$parent?.$parent?.$parent?.$parent?.actFormData?.actModifyFrom === 'true') {
        //   debugger
        //   this.$parent.otherBtnHide = false
        // }
      }
    },
    beforeUpdate() {
      // 申请人参数如果不传默认是数据中的 createBy.id 字段
      if (this.apply === undefined && this.busData !== undefined && this.busData.createBy?.id !== undefined && this.busData.createBy?.id !== null) {
        this.applyId = this.busData.createBy.id
      } else {
        this.applyId = this.apply
      }
      // 流程状态参数如果不传默认是数据中的 actStatus 字段
      if (this.status === undefined) {
        this.actStatus = this.busData.actStatus
      } else {
        this.actStatus = this.status
      }
    },
    methods: {
      // 调用源页面的保存方法
      submitForm: function(type) {
        this.isDisable = true
        setTimeout(() => {
          this.isDisable = false // 点击一次时隔一秒后才能再次点击
        }, 1000)
        if (this.saveFunc) {
          this.saveFunc(type)
        } else {
          this.$parent.submitForm(type)
        }
      },
      cancel: function() {
        if (this.cancelFunc) {
          this.cancelFunc()
        } else {
          this.$parent.$parent.$parent.formOpen = false
          this.$parent.$parent.$parent.reset()
        }
      },
      showImage() {
        this.$nextTick(() => {
          if (this.processKey) {
            showFlowChart(this.processKey).then(response => {
              this.imageOpen = true
              this.loading = true
              this.processData.photoBase64 = response.data
              this.loading = false
            })
          } else {
            getProcessKey(this.menuKey).then(res => {
              this.processData.processDefinitionKey = res.data
              showFlowChart(res.data).then(response => {
                this.imageOpen = true
                this.loading = true
                this.processData.photoBase64 = response.data
                this.loading = false
              })
            })
          }
        })
      },
      // 打开流程详情页面显示XML
      showXml() {
        this.imageOpen = true
        if (this.processKey) {
          this.$nextTick(() => {
            this.$refs.actFlowFormChart.init(this.processKey)
          })
        } else {
          getProcessKey(this.menuKey).then(res => {
            this.processData.processDefinitionKey = res.data
            this.$nextTick(() => {
              this.$refs.actFlowFormChart.init(res.data)
            })
          })
        }
      },
      cacheData(data) {
        console.log('缓存', data)
        this.$parent.form = data
      }
    }
  }
</script>
